<template>
  <swiper-action @onClickAction="onClickAction">
    <view class="new-car-item" @click="onJumpDetails">
      <view class="top-box">
        <u-image :src="item.goodimg" width="260" height="172"></u-image>
        <view class="info">
          <text class="title">{{item.car_type_name}} {{item.configuration_name}}</text>
          <view class="tags">
            <view class="tag" v-if="item.isgover === 1"><text>自营</text></view>
            <view class="tag tag-1" v-if="item.rent_out_id"><text>以租代售</text></view>
            <view class="tag tag-2" v-if="item.down_payment_id"><text>一成首付</text></view>
            <view class="tag tag-3" v-if="item.is_loans === 1"><text>巨能降</text></view>
          </view>
          <view class="price-box">
            <text class="mark-price">指导价：{{item.factory_price | formatPrice}}</text>
            <!-- 优惠金额，仅全款类型才展示 -->
            <view class="sell-price" v-if="item.is_loans === 1">
              <u-icon name="arrow-downward" size="22"></u-icon>
              <text class="text">{{item.factory_price - item.client_price | formatPrice}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 全款类型展示状态 -->
      <view class="bottom-box" v-if="item.is_loans === 1">
        <text class="text">裸车价<text class="big">{{item.client_price | formatNum}}</text>{{item.client_price | formatUnit}}</text>
      </view>
      <!-- 月供类型展示状态 -->
      <view class="bottom-box" v-if="item.down_minimum_down_payment">
        <text class="text">月供{{item.down_minimum_Monthly_payments}}</text>
        <text class="text">首付<text class="big">{{item.down_minimum_down_payment | formatNum}}</text>{{item.down_minimum_down_payment | formatUnit}}</text>
      </view>
      <view class="bottom-box" v-else-if="item.rent_minimum_down_payment">
        <text class="text">月供{{item.rent_minimum_Monthly_payments}}</text>
        <text class="text">首付<text class="big">{{item.rent_minimum_down_payment | formatNum}}</text>{{item.rent_minimum_down_payment | formatUnit}}</text>
      </view>
    </view>
  </swiper-action>
</template>

<script>
import swiperAction from './swiper-action.vue'
// 格式化金额
function numberFormat (value) {
  let param = {}
  let k = 10000
  let sizes = ['', '万', '亿', '万亿']
  let i
  if(!value) return ''
  if(value < k) {
    param.value =value
    param.unit = ''
  } else {
    i = Math.floor(Math.log(value) / Math.log(k))
    param.value = ((value / Math.pow(k, i))).toFixed(2)
    param.unit = sizes[i]
  }
  return param
}
export default {
  components: {
    swiperAction
  },
  props: {
    // 当前列表项
    item: {
      type: Object,
      default: () => {
        return {
          buytype: 1
        }
      }
    },
    // 当前列表项索引
    itemIndex: {
      type: [String, Number],
      default: ''
    }
  },
  filters: {
    // 格式化价格
    formatPrice (data) {
      if(!data) return '0'
      let res = numberFormat(data)
      return res.value + res.unit
    },
    // 格式化单位
    formatUnit(data) {
      if(!data) return ''
      let res = numberFormat(data)
      return res.unit
    },
    // 格式化金额
    formatNum(data) {
      if(!data) return '0'
      let res = numberFormat(data)
      return res.value
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 右侧按钮点击
    onClickAction(type) {
      this.$emit('onClickAction', {
        type: type,
        index: this.itemIndex,
        item: this.item
      })
    },
    // 跳转详情
    onJumpDetails() {
      if(this.item.is_loans === 1) {
        uni.navigateTo({
          url: `/pages_commodity/giantnengjiangDetails/giantnengjiangDetails?goodid=${this.item.giftid}`
        })
      } else {
        uni.navigateTo({
          url: `/pages_commodity/sourceDetails/sourceDetails?goodid=${this.item.giftid}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.new-car-item{
  margin: 0 24rpx;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #eee;
  .top-box{
    flex: 1;
    display: flex;
    .info{
      flex: 1;
      margin-left: 30rpx;
      .title{
        display: block;
        font-size: 28rpx;
        color: #343434;
        line-height: 42rpx;
        font-weight: bold;
      }
      .tags{
        display: flex;
        margin: 16rpx 0;
        .tag{
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30rpx;
          padding: 0 10rpx;
          border-radius: 5rpx;
          font-size: 22rpx;
          color: #fff;
          font-weight: bold;
          background-color: #FF4B44;
          margin-left: 14rpx;
        }
        .tag:first-child{
          margin-left: 0;
        }
        .tag-1{
          background-color: #FFB763;
        }
        .tag-2{
          background-color: #FFD053;
        }
        .tag-3{
          background-color: #B5D55E;
        }
      }
      .price-box{
        display: flex;
        align-items: center;
        font-size: 22rpx;
        .mark-price{
          color: #666;
        }
        .sell-price{
          margin-left: 20rpx;
          color: #38AA0B;
          .text{
            font-weight: bold;
          }
        }
      }
    }
  }
  .bottom-box{
    font-size: 26rpx;
    color: #FC4040;
    margin-top: 20rpx;
    vertical-align: bottom;
    text-align: right;
    .text{
      margin-left: 20rpx;
    }
    .big{
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}
</style>
